import { Table, Space, Button } from 'antd'
import {
  PlusCircleOutlined,
  MinusCircleOutlined,
  UpCircleOutlined,
  DownCircleOutlined,
} from '@ant-design/icons'
import { useEffect, useState } from 'react'

export const DynamicTable = ({ loading, columns, data, initRow, onChange, isMove,  firstMove, tableProps, onDelete, isFirstDisabled }) => {
  const [actionWidth, setActionWidth] = useState(80)

  useEffect(() => {
    setActionWidth(isMove? 140 : 80)
  }, [isMove])
  
  const updateValue = (data) => {
    onChange(data)
  }

  const handleAdd = (index) => {
    data.splice(index + 1, 0, initRow())
    updateValue(data)
  }

  const handleRemove = (index) => {
    if (!data[index].id) {
      data.splice(index, 1)
      updateValue(data)
    } else {
      onDelete(index, data[index])
    }
  }

  const handleMoveDown = (index) => {
    if (index < data.length - 1) {
      const temp = data[index]
      data[index] = data[index + 1]
      data[index + 1] = temp
      updateValue(data)
    }
  }

  const handleMoveUp = (index) => {
    if (index > 0) {
      const temp = data[index]
      data[index] = data[index - 1]
      data[index - 1] = temp
      updateValue(data)
    }
  }

  const innerColumns = [
    ...columns,
    {
      title: '操作',
      dataIndex: 'key',
      width: actionWidth,
      render: (key, record, index) => {
        return (
          <Space>
            <Button
              className='icon-btn'
              type='text'
              title='添加一行'
              icon={<PlusCircleOutlined />}
              size="small"
              onClick={() => handleAdd(index)}
            />
            <Button
              className='icon-btn'
              type='text'
              title='删除一行'
              icon={<MinusCircleOutlined />}
              size="small"
              disabled={isFirstDisabled && index === 0}
              onClick={() => handleRemove(index)}
            />
            {(isMove && (index != 0 || firstMove)) && (
              <>
                <Button
                  className='icon-btn'
                  type='text'
                  title='上移'
                  icon={<UpCircleOutlined />}
                  size="small"
                  disabled={index === 0}
                  onClick={() => handleMoveUp(index)}
                />
                <Button
                  className='icon-btn'
                  type='text'
                  title='下移'
                  icon={<DownCircleOutlined />}
                  size="small"
                  disabled={index === data.length - 1}
                  onClick={() => handleMoveDown(index)}
                />
              </>
            )}
          </Space>
        )
      },
    },
  ]

  const otherTableProps = {
    scroll: { y: 500 },
    pagination: false,
    size: 'small',
    ...(tableProps || {})
  }

  return (
    <Table
      rowKey='key'
      loading={ loading }
      dataSource={data}
      columns={innerColumns}
      {...otherTableProps}
    ></Table>
  )
}

export default DynamicTable
